<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/weixiujihua.css">
    <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../js/allData.js"></script>

</head>

<body>
    <div class="container weixiujihua">
        <div class="header">
            <h4>维修质量</h4>
            <div class="top_box clear">
                <div class="search_box">
                    <div>
                        <label for="">开始时间</label>
                        <input type="date" class="startTime">
                    </div>
                    <div>
                        <label for="">结束时间</label>
                        <input type="date" class="endTime">
                    </div>
                    <div>
                        <label for="">搜索</label>
                        <input type="text" class="danhao" onfocus="this.placeholder=''"
                            onblur="this.placeholder='请输入维修单号/装备名称/编号'" placeholder="请输入维修单号/装备名称/编号">
                    </div>
                </div>
                <div class="search_btn_box">
                    <button type="button" class="chongzhi">
                        <i class="glyphicon glyphicon-repeat"></i>
                        重置
                    </button>
                    <button type="button" class="chaxun">
                        <i class="glyphicon glyphicon-search"></i>
                        查询
                    </button>
                </div>
            </div>
        </div>

        <table class="table">
            <thead id="thead">
                <tr>
                    <th>维修单号</th>
                    <th>装备名称</th>
                    <th>装备编号</th>
                    <th>故障描述</th>
                    <th>计划时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody id="tbody">

            </tbody>
        </table>

        <div class="page_box clear">
            <div class="pageNum">
                <span>共<span>10</span>页/ <span>100</span>条数据</span>
                <div class="pageBtn_box clear">
                    <div id="preBtn" onclick="prevBtn()">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </div>
                    <div id="pageBox">

                    </div>
                    <div id="nextBtn" onclick="nextBtn()">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>

                <div class="tiaozhuan_box">
                    <span>转至</span>
                    <input type="text" value="1" id="tiaozhuan">
                    <span>页</span>

                    <a href="#" onclick="tiaozhuan()">跳转</a>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除吗该条数据吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


        <!-- 登录提示弹框 -->
        <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
                    </div>
                    <div class="modal-body">您还没有登录，请先登录</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary queding">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <script>
             let user = JSON.parse(sessionStorage.getItem('user'));
            // let userName = document.querySelector('.register_box>span')
            // console.log(user);

            if (user == null) {
                $('#myModals').modal('show')
            } else {
                $('.register_box>span').text(user.username)
            }
            $('.queding').click(function () {
                location.href = '../login.html'
            })


            let maxPage;
            let thePage = 0;
            let fenyeList = weixiuList;
            // 渲染页面
            function showTable(data) {
                $('#tbody').html('');
                $.each(data, (index, item) => {
                    $('#tbody').append(`
                    <tr>
                        <td>${item.danhao}</td>
                        <td>${item.zhuangbeiName}</td>
                        <td>${item.bianhao}</td>
                        <td>${item.guzhang}</td>
                        <td>${item.jihuaTime}</td>
                        <td>
                            <button class="btn_chakan tiaozhuan" data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-eye-open"></i>
                                <a href="./weixiujingfei.html"></a>
                            </button>
                        </td>
                    </tr>
                `)
                })
            }
            // showTable(weixiuList)



            // 根据数据源渲染每一页的数据
            function fenye(data, yema) {
                let qishiye = (yema - 1) * 8;
                let xuanranArr = data.slice(qishiye, qishiye + 8);
                showTable(xuanranArr);
                thePage = yema;

                let num = $('.pageItem').text();
                // console.log(num.length);
                for (let i = 0; i < num.length; i++) {
                    $('.pageItem').eq(i).css({
                        backgroundColor: '',
                        color: '#969494'
                    })
                }
                $('.pageItem').eq(yema - 1).css({
                    backgroundColor: '#6554C0',
                    color: '#fff'
                })
            }

            // 根据页码渲染分页按钮
            function xuanranPage(data) {
                maxPage = Math.ceil(data.length / 8);
                $('#pageBox').html('')
                for (let i = 1; i <= maxPage; i++) {
                    $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
                }
            }
            xuanranPage(weixiuList)
            fenye(weixiuList, 1)

            // 点击按钮，实现页面渲染新数据
            $('#pageBox').on('click', '.pageItem', function () {
                let num = parseInt($(this).text());
                fenye(weixiuList, num)
            })

            // 上一页
            function prevBtn() {
                if (thePage != 1) {
                    let page = thePage - 1;
                    fenye(weixiuList, page)
                }
            }

            //下一页
            function nextBtn() {
                if (thePage < maxPage) {
                    let page = thePage + 1;
                    fenye(weixiuList, page)
                }
            }

            // 跳转
            function tiaozhuan() {
                let val = document.getElementById('tiaozhuan').value;
                fenye(weixiuList, val)
            }


            // 查找
            let data
            let dataTime = [] //用来装数据源里的开始时间
            let sliceTime = []; //用来装截取的时间
            $('.chaxun').click(function () {
                let startTime = $('.startTime').val();
                let endTime = $('.endTime').val();
                let danhao = $('.danhao').val();

                // let rep = startTime.replace(/-/g,'/')
                for (let i = 0; i < weixiuList.length; i++) {
                    let startDate = weixiuList[i].startTime.slice(0, 10).replace(/\//g, '-');
                    let endDate = weixiuList[i].endTime.replace(/\//g, '-');
                    let danData = weixiuList[i].danhao

                    if (startTime != '' && endTime == '' && danhao == '') {
                        if (startTime == startDate) {
                            sliceTime.push(weixiuList[i])
                        }
                    } else if (startTime == '' && endTime != '' && danhao == '') {
                        if (endTime == endDate) {
                            sliceTime.push(weixiuList[i])
                        }
                    } else if (startTime == '' && endTime == '' && danhao != '') {
                        if (danhao == danData) {
                            sliceTime.push(weixiuList[i])
                        }
                    }
                }
                fenyeList = sliceTime
                show(1)
            })

            // 重置
            $('.chongzhi').click(function () {
                fenyeList = weixiuList
                show(1)
            })

            show(1)
            function show(num) {
                xuanranPage(fenyeList);
                fenye(fenyeList, 1)
            }

            // 跳转新页面
            $('.tiaozhuan').click(function () {
                let obj = JSON.parse($(this).attr('data-item'))
                let danhao = JSON.stringify(obj.danhao)
                sessionStorage.setItem('danhao',danhao)
                location.href='./weixiuzhiliang_jiance.html'
            })
        </script>
</body>

</html>